@media (prefers-color-scheme: light) {
  :root {
    --main-color: #252525;
    --main-bg-color: #EDEDED;
    --nav-bg:  linear-gradient(180deg, #EDECED 1%, #D2D1D2 97%);
    --nav-shadow: inset 0 0 0 0 rgba(255,255,255,0.50), inset 0 0 0 0 #B7B4B7, inset 0 -1px 0 0 rgba(183,180,183,0.30);

    --hr-bg-color: #DBDBDB;

    --button-bg-color: #FFFFFF;
    --button-color: rgba(0,0,0,0.85);
    --button-shadow: 0 0 1px 0 rgba(0,0,0,0.20);
    --button-push-bg: linear-gradient(180deg, #6CB3FA 0%, #067DFF 100%);
    --button-push-shadow: 0 0 0 0 rgba(0,0,0,0.15);

    --checkbox-bg: #FFFFFF;
    --checkbox-shadow: inset 0 0 1px 0 rgba(0,0,0,0.38);
    --checkbox-checked-bg: #3B99FC;

    --has-select-before-bg: linear-gradient(180deg, #6CB3FA 0%, #057EFF 100%);
    --select-bg: #FFFFFF;
    --select-color: #252525;
    --select-border:0 solid rgba(0,0,0,0.15);
    --select-shadow:  0 0 1px 0 rgba(0,0,0,0.20);
    --select-option-bg: #FFFFFF;

    --appearance-border-color: #FFFFFF;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --main-color: rgba(255,255,255,0.85);
    --main-bg-color: #2D2D2D;
    --nav-bg: linear-gradient(180deg, #4B4B4B 1%, #3D3D3D 97%);
    --nav-shadow: inset 0 0 0 0 #000000, inset 0 -1px 0 0 #2B2B2B, inset 0 0 0 0 rgba(255,255,255,0.10);

    --hr-bg-color: #535353;

    --button-bg-color: rgba(255,255,255,0.25);
    --button-color: rgba(255,255,255,0.85);;
    --button-shadow: 0 0 1px 0 rgba(0,0,0,0.20), inset 0 1px 0 0 rgba(255,255,255,0.04), inset 0 0 0 0 rgba(255,255,255,0.16);
    --button-push-bg: linear-gradient(180deg, #1768E5 0%, #145CCC 100%);
    --button-push-shadow: 0 0 1px 0 rgba(0,0,0,0.40), 0 0 1px 0 rgba(0,0,0,0.20), inset 0 0 0 0 rgba(255,255,255,0.25), inset 0 1px 0 0 rgba(255,255,255,0.06);

    --checkbox-bg: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.28) 100%);
    --checkbox-shadow: 0 0 1px 0 rgba(0,0,0,0.40), 0 0 1px 0 rgba(0,0,0,0.20), inset 0 0 0 0 rgba(255,255,255,0.25), inset 0 1px 0 0 rgba(255,255,255,0.06);
    --checkbox-checked-bg:  linear-gradient(180deg, #1768E5 0%, #145CCC 100%);

    --has-select-before-bg:  linear-gradient(180deg, #1768E5 0%, #145CCC 100%);
    --select-bg: rgba(255,255,255,0.25);
    --select-color: rgba(255,255,255,0.85);
    --select-border: 0 solid rgba(0,0,0,0.35);
    --select-shadow: 0 0 1px 0 rgba(0,0,0,0.20), inset 0 1px 0 0 rgba(255,255,255,0.04), inset 0 0 0 0 rgba(255,255,255,0.16);
    --select-option-bg: #616161;

    --appearance-border-color: #3A3A3A;
  }
}
